<template>
    <div class="w-[350px] px-12" ref="domRef">
        <div class="mb-4 flex justify-between text-slate-800">
            <div>热门文章</div>
            <el-button :icon="Refresh" @click="refreshArticle" size="small">
                刷新
            </el-button>
        </div>
        <div>
            <ArticleItem
                v-for="item in hotArticle.rows"
                :item="item"
                @click="router.push(`/article/${item.id}`)"
                min
            />
        </div>
        <div class="my-4 flex justify-between text-slate-800">
            <div>热门教学案例</div>
            <el-button :icon="Refresh" @click="refreshTeachCase" size="small">
                刷新
            </el-button>
        </div>
        <div>
            <ArticleItem
                v-for="item in hotCases.rows"
                :item="item"
                @click="toCase(item)"
                min
            />
        </div>
    </div>
</template>

<script setup lang="ts">
import { getHotList } from '@/apis/hot'
import { Refresh } from '@element-plus/icons-vue'
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { ICaseListItem } from '../CaseList/caseList'
import ArticleItem from './ArticleItem.vue'

const hotArticle = ref({
    count: 0,
    rows: [] as any[],
})
const hotCases = ref({
    count: 0,
    rows: [] as any[],
})
const router = useRouter()
const domRef = ref()

// const handleScroll = () => {
//     if (!domRef.value) return
//     const dom = domRef.value
//     const offsetTop = dom.offsetTop
//     // 获取scrollTop
//     const scrollTop =
//         document.documentElement.scrollTop || document.body.scrollTop

//     if (scrollTop > 100) {
//         // dom.style.transform = `translateY(${scrollTop - offsetTop + 20}px)`
//         dom.style.position = 'fixed'
//         dom.style.top = '20px'
//         dom.style.marginTop = '0px'
//     } else {
//         // dom.style.transform = ``
//         dom.style.position = 'static'
//         dom.style.marginTop = '80px'
//     }
// }

// onMounted(() => {
//     // 页面滚动时，始终保持在离顶部 20 像素的位置
//     document.addEventListener('scroll', handleScroll)
// })
// onUnmounted(() => {
//     document.removeEventListener('scroll', handleScroll)
// })

const refreshArticle = async () => {
    const res = await getHotList('articles', {
        page: 1,
        pageSize: 5,
        attributes: {
            excluede: ['content'],
        },
    })
    if (!res.success) return
    hotArticle.value = res.data
}

const refreshTeachCase = async () => {
    const res = await getHotList('teachCases', {
        page: 1,
        pageSize: 5,
        attributes: {
            excluede: ['doc'],
        },
    })
    if (!res.success) return
    hotCases.value = res.data
}

const getData = async () => {
    refreshArticle()
    refreshTeachCase()
}

getData()

const toCase = (caseItem: ICaseListItem) => {
    const idTxt = caseItem.id ? `?id=${caseItem.id}` : ''
    router.push(`/case/${caseItem.key}${idTxt}`)
}
</script>

<style scoped></style>
